<template>
  <div class="list">
    <Content v-bind="foodList">
      <!-- 在template上,通过v-slot指令接受来自组件内部的作用域插槽传的值组成的对象,我们可以直接通过解构接受对应的值 -->
      <template v-slot:typeList="{ list }">
        <ol>
          <li v-for="item in list" :key="item">{{ item }}</li>
        </ol>
      </template>
    </Content>
    <Content v-bind="gameList">
      <template #typeList="{ list }">
        <ul>
          <li v-for="item in list" :key="item">{{ item }}</li>
        </ul>
      </template>
    </Content>
  </div>
</template>

<script>
import Content from "./components/Content";
export default {
  name: "App",
  components: {
    Content,
  },
  data() {
    return {
      foodList: {
        type: "食物",
        list: ["海鲜", "豆皮", "牛肉"],
      },
      gameList: {
        type: "游戏",
        list: ["DNF", "LOL", "DOTA", "CS"],
      },
    };
  },
};
</script>

<style scoped>
.list {
  display: flex;
  justify-content: space-between;
}
</style>
